<template>

  <div id="mchart" :style="{ width: '800px', height: '300px' }">

  </div>
</template>

<script>

export default {
  name: "homecharts",
  data() {
    return {
      option : {
        xAxis: {
          type: 'category',
          data: ['1号楼', '2号楼', '3号楼', '4号楼', '5号楼', '6号楼', '7号楼']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
    }
  },
  methods: {
    loadCharts(){

      this.axios.get('http://localhost:9000/dorms/summary').then(res=>{
        console.log(res.data)
        this.option.xAxis.data=[]
        this.option.series[0].data=[]

        res.data.forEach(item=>{
          this.option.series[0].data.push(item.cnt)
          this.option.xAxis.data.push(item.building+'号楼')
        })

        var chartDom = document.getElementById('mchart');
        var myChart = this.$echarts.init(chartDom);
        this.option && myChart.setOption(this.option);

      })


    }
  },
  mounted() {
    this.loadCharts();

  },
  created() {
    this.axios.get('http://localhost:9000/dorms/summary').then(res=>{
      console.log(res.data)
      this.option.xAxis.data=[]
      this.option.series[0].data=[]

      res.data.forEach(item=>{
        this.option.series[0].data.push(item.cnt)
        this.option.xAxis.data.push(item.building)
      })
    })
  }


}

</script>


<style>

</style>
